<script setup lang="ts" name="SystemMenu">
import { getList , deleteById } from '@/api/system/menu';
import { ref , reactive , toRefs , onMounted , defineAsyncComponent } from 'vue';
import { notify } from '@/utils/element';
import type {SysMenuQuery, SysMenuType} from "@/types/system";

const MenuEdit = defineAsyncComponent(() => import('@/views/system/menu/components/menu-edit.vue'));

const tableListRef = ref();

const editRef = ref();

const state = reactive({
  loading: false,
  query: {
    keyword: '',
  } as SysMenuQuery,
  tableList: [] as SysMenuType[],
})

const { loading , query , tableList } = toRefs(state);

onMounted(() => {
  queryData();
})

async function queryData() {
  try {
    state.loading = true;
    const { data } = await getList(state.query);
    //console.log('queryData',data);
    state.tableList = data;
  } catch (error) {
  } finally {
    state.loading = false;
  }
}

function toggleRow(row: SysMenuType) {
  console.log('toggleRow',row);
  tableListRef.value.toggleRowExpansion(row);
}

function handleAdd(parentId?: string){
  editRef.value.open('add', '新增', {parentId});
}
function handleEdit(row: SysMenuType){
  //console.log('handleEdit', row)
  editRef.value.open('edit','编辑',row);
}
async function handleDelete(id: string){
  console.log('handleDelete',id);
  try {
    state.loading = true;
    await deleteById(id);
    //提示成功
    notify('删除成功！', {type: 'success'});
    //刷新列表
    queryData();
  } catch (error) {
  } finally {
    state.loading = false;
  }

}
</script>

<template>
  <div class="layout-padding">
<!--    v-auth="'system:menu:search'"-->
    <el-form inline :model="query">
      <el-form-item label="菜单名称">
        <el-input v-model="query.keyword" placeholder="请输入菜单名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button @click="queryData()" icon="ele-Search" type="primary">查询</el-button>
        <el-button @click="handleAdd()" icon="ele-Plus" type="success">新增菜单</el-button>
      </el-form-item>
    </el-form>
<!--    v-auth="'system:menu:search'"-->
    <el-table
      class="w100"
      ref="tableListRef"
      v-loading="loading"
      :data="tableList"
      row-key="menuId"
      border
      stripe
      @row-click="toggleRow"
    >
      <el-table-column prop="menuName" label="菜单名称" header-align="center" align="left">
          <template #default="{row}">
              <SvgIcon :name="row.meta?.icon || ''"/>
              <span class="ml10">{{ row.menuName }}</span>
          </template>
      </el-table-column>
      <el-table-column prop="path" label="路由地址" header-align="center" align="left" show-overflow-tooltip/>
      <el-table-column prop="component" label="组件路径" header-align="center" align="left" show-overflow-tooltip/>
      <el-table-column prop="perms" label="权限标识" header-align="center" align="left" show-overflow-tooltip/>
      <el-table-column prop="type" label="类型" align="center">
        <template #default="{row}">
              <el-tag effect="plain" :type="row.menuType == 'C' ? 'primary' :  row.menuType == 'M' ?  'success' : 'warning'">{{ row.menuType == 'C' ? '菜单' : row.menuType == 'M' ?  '父菜单' : '按钮' }}</el-tag>
          </template>
      </el-table-column>
      <el-table-column prop="orderNum" label="排序" align="center" width="100px"/>
      <el-table-column label="操作" align="center" width="240px">
        <template #default="{row}">
          <el-button @click.stop="handleAdd(row.menuId)" v-if="row.menuType != 'F'" icon="ele-Plus" type="primary" link>新增下级</el-button>
          <el-button @click.stop="handleEdit(row)" icon="ele-Edit" type="warning" link>修改</el-button>
          <el-popconfirm @confirm="handleDelete(row.menuId)" width="auto" :title="`确定永久删除【${row.menuName}】吗?`">
            <template #reference>
              <el-button @click.stop icon="ele-Delete" type="danger" link>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增、编辑弹出组件 -->
    <MenuEdit ref="editRef" @refresh="queryData"/>
  </div>
</template>

<style scoped>

</style>
